<template>
	<view class="">
		<view class="topbox">
			<view class="statebox" v-if="obj.state==1">
				<image src="http://youjialibo.wm76.mtnet.ren/upload/20210907/27c6c5228b47cf4e1025138b8fa22d73.png"
					mode=""></image>
				<view class="rigbox">
					<view class="title">
						待付款
					</view>
					<view class="time" v-if="!timeflag">
						<u-count-down :timestamp="timestamp" separator="zh" border-color="none" bg-color="none"
							color="#ffffff" separator-color="#ffffff"></u-count-down>
					</view>
					<view class="shixiao" v-if="timeflag">
						订单已失效
					</view>
				</view>
			</view>
			<view class="statebox" v-if="obj.state==2">
				<image src="http://youjialibo.wm76.mtnet.ren/upload/20210907/0d30a2f333e70d325ef88a1b4ed72f92.png"
					mode="" style="width: 141rpx;"></image>
				<view class="rigbox">
					<view class="title">
						待发货
					</view>
				</view>
			</view>
			<view class="statebox" v-if="obj.state==3">
				<image src="http://youjialibo.wm76.mtnet.ren/upload/20210907/7e5513ba2cef1c38c7792e0cdb3c0c93.png"
					mode=""></image>
				<view class="rigbox">
					<view class="title">
						待收货
					</view>
				</view>
			</view>
			<view class="statebox" v-if="obj.state==4">
				<image src="http://youjialibo.wm76.mtnet.ren/upload/20210907/c31c1b846e17e5e85f046c5d1d67e22d.png"
					mode=""></image>
				<view class="rigbox">
					<view class="title">
						交易已完成
					</view>
				</view>
			</view>
			<view class="dzbox">
				<view class="leftbox">
					<view class="namebox">
						<text class="name">{{obj.name}}</text>
						<text>{{obj.phone}}</text>
					</view>
					<view class="site">
						{{obj.address}}
					</view>
				</view>
			</view>
		</view>
		<view class="boxs">
			<view class="title">
				商品信息
			</view>
			<view class="boxsss">
				<view class="spxx" v-for="(item,index) in obj.mallorder" :key="index" @click="xqproduct(item)">
					<image :src="item.img" mode=""></image>
					<view class="rightbox">
						<view class="namebox">
							<view class="name">
								{{item.name}}
							</view>
							<view class="shulian">
								×{{item.num}}
							</view>
						</view>
						<view class="jifenbox">
							<text class="num"><text class="danwi">￥</text>{{item.money}}</text>
						</view>
						<view class="tiaojian">
							<text>{{item.attribute}}</text>
						</view>
						<!-- <view class="remark" @click="issueremark">
							商品评论
						</view> -->
					</view>
				</view>
				<view class="allbox">
					<text class="allprice">总价：</text>{{obj.money}}
				</view>
			</view>


			<view class="" v-if="obj.state==4">
				<view class="hr"></view>
				<view class="deliveryman">
					<image :src="obj.deliveryPersonnel.head_img" mode=""></image>
					<view class="ifobox">
						<view class="name">
							{{obj.deliveryPersonnel.name}}
						</view>
						<view class="tele">
							{{obj.deliveryPersonnel.phone}}
						</view>
					</view>

				</view>
			</view>
			<view class="hr"></view>
			<view class="title">
				订单信息
			</view>
			<view class="spbox">
				<text class="leftbox">商品合计：</text>
				<text class="rightbox">￥{{obj.money}}</text>
			</view>
			<!-- <view class="spbox">
				<text class="leftbox">运费：</text>
				<text class="rightbox">￥0.00</text>
			</view> -->
			<view class="spbox">
				<text class="leftbox">优惠券：</text>
				<text class="rightbox">￥{{obj.coupons_num}}</text>
			</view>
			<view class="spbox">
				<text class="leftbox">金币抵用：</text>
				<text class="rightbox">￥{{obj.gold_coins}}</text>
			</view>
			<view class="hr"></view>
			<view class="spbox">
				<text class="leftbox">订单备注：</text>
				<text class="rightbox">{{obj.remarks?obj.remarks:"暂无备注"}}</text>
			</view>
			<view class="hr"></view>
			<view class="spboxs">
				<view class="ordernum">
					<text class="leftbox">订单编号：</text>
					<text class="rightbox">{{obj.order_num}}</text>
				</view>
				<view class="fzhi" @click="cope(obj.order_num)">
					复制
				</view>
			</view>
			<view class="spbox">
				<text class="leftbox">提交时间：</text>
				<text class="rightbox">{{obj.create_time}}</text>
			</view>
			<view class="spbox">
				<text class="leftbox">支付方式：</text>
				<text class="rightbox">{{obj.type}}</text>
			</view>
			<view class="">
				<view class="spbox">
					<text class="leftbox">实付金额：</text>
					<text class="rightbox">￥{{practical}}</text>
				</view>
				<view class="spbox">
					<text class="leftbox">付款时间：</text>
					<text class="rightbox">{{obj.update_time}}</text>
				</view>
			</view>
			<view class="smallbox">

			</view>
		</view>
		<view class="btnboxs" v-if="obj.state==1">
			<text class="title">应付款：<text class="danwi">￥</text><text class="price">{{practical}}</text></text>
			<view class="anniubox">
				<view class="del" @click="cancel">
					取消订单
				</view>
				<view class="now" @click="nowbuy">
					立即支付
				</view>
			</view>
		</view>
		<!-- <view class="btnboxs" v-if="obj.state==3">
			<view class="qr" @click="affirm">
				确认收货
			</view>
		</view> -->
		<view class="btnboxs" v-if="obj.state==4">
			<view class="orders" @click="delet">
				删除订单
			</view>
			<view class="order" @click="apply(obj.id)">
				申请售后
			</view>
			<!-- <view class="order">
				商品评价
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getorderinfo,
		confirmreceipt,
		deleteorder,
		cancelorder,
		againpayorder
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				timestamp: 0,
				id: 0,
				obj: {},
				// 实际付款金额
				practical: 0,
				// 用于判断订单是否过期
				timeflag:false
			}
		},
		methods: {
			cope(v) {
				let a = v.toString()
				uni.setClipboardData({
					data: a,
					success: function() {},
					fail() {
						console.log("失败")
					}
				});
			},
			// 发布评论
			issueremark() {
				this.jumpLink({
					link: "/pages/issue_remark/index"
				})
			},
			public() {
				uni.showLoading({
					title: "加载中"
				})
				getorderinfo({
					id: this.id
				}).then(res => {
					uni.hideLoading()
					this.obj = res.data
					this.practical = res.data.money - res.data.gold_coins
					let time = ((new Date(res.data.create_time)).getTime()) + (60*1000 * 5);
					let nowtime = Date.parse(new Date())
					this.timestamp = (time - nowtime) / 1000
					if(this.timestamp<=0){
						this.timeflag=true
					}
				})
			},
			// 确认收货
			affirm() {
				uni.showLoading({
					title: "载入中"
				})
				confirmreceipt({
					id: this.obj.id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "success",
						duration: 2000
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			},
			// 删除订单
			delet() {
				uni.showLoading({
					title: "载入中"
				})
				deleteorder({
					id: this.obj.id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "success",
						duration: 2000
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			},
			// 取消订单
			cancel() {
				uni.showLoading({
					title: "载入中"
				})
				let data = {
					order_num: this.obj.order_num
				}
				cancelorder(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "success",
						duration: 2000
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			},
			// 立即购买
			nowbuy() {
				uni.showLoading({
					title: "载入中"
				})
				let data = {
					id: this.obj.id,
					type: "wechat_applet"
				}
				againpayorder(data).then(res => {
					uni.hideLoading()
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timestamp,
						nonceStr: res.data.noncestr,
						package: res.data.package,
						signType: 'MD5',
						paySign: res.data.sign,
						success: function(res) {
							uni.navigateBack({
								delta: 1
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			},
			apply(v) {
				this.jumpLink({
					link: "/pages/sqafter_sale/index",
					query: {
						id: v
					}
				})
			},
			// 商品详情
			xqproduct(v){
				this.jumpLink({
					link: "/pages/productxq/index",
					query: {
						id: v.commodity_id
					}
				})
			}
		},
		onLoad(v) {
			this.id = v.id
		},
		onShow() {
			this.public()
		}
	}
</script>

<style scoped lang="scss">
	.topbox {
		background-color: #f42121;
		height: 315rpx;
		padding-top: 50rpx;
		box-sizing: border-box;

		.statebox {
			margin-left: 40rpx;
			align-items: center;
			display: flex;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			.rigbox {
				margin-left: 35rpx;

				.title {
					font-family: MicrosoftYaHei-Bold;
					font-size: 36rpx;
					color: #ffffff;
					font-weight: 700;
				}

				.time {
					color: #FFFFFF;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
				}
			}
		}

		.dzbox {
			background-color: #FFFFFF;
			width: 700rpx;
			border-top-left-radius: 6rpx;
			border-top-right-radius: 6rpx;
			height: 166rpx;
			margin-left: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 45rpx 38rpx 36rpx 29rpx;
			box-sizing: border-box;
			margin-top: 13rpx;

			.namebox {
				text {
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #282828;
				}

				.name {
					font-family: MicrosoftYaHei-Bold;
					font-size: 28rpx;
					color: #333333;
					font-weight: 700;
					margin-right: 20rpx;
				}
			}

			.site {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #282828;
				margin-top: 30rpx;
			}
		}

		.angle {
			width: 20rpx;
			height: 20rpx;
			border-top: 1px solid #000;
			border-left: 1px solid #000;
			transform: rotate(135deg)
		}
	}

	.boxs {
		background-color: #FFFFFF;
		margin-top: 15rpx;
		margin-left: 25rpx;
		margin-bottom: 40rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		padding-top: 32rpx;
		box-sizing: border-box;
		width: 700rpx;
		border-bottom-left-radius: 6rpx;
		border-bottom-right-radius: 6rpx;

		.title {
			font-family: MicrosoftYaHei-Bold;
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
			margin-left: 19rpx;
		}

		.hr {
			width: 678rpx;
			height: 1rpx;
			background-color: #000000;
			opacity: 0.2;
			margin-top: 30rpx;
			margin-bottom: 40rpx;
		}

		.spxx {
			margin-left: 19rpx;
			display: flex;
			margin-top: 30rpx;

			image {
				width: 181rpx;
				height: 181rpx;
			}

			.rightbox {
				margin-left: 18rpx;

				.namebox {
					display: flex;
					justify-content: space-between;

					.name {
						width: 397rpx;
						margin-right: 30rpx;
						line-height: 36rpx;
						font-family: MicrosoftYaHei;
						font-size: 24rpx;
						color: #000000;
					}

					.shulian {
						font-family: MicrosoftYaHei;
						font-size: 24rpx;
						color: #000000;
					}
				}

				.jifenbox {
					font-family: MicrosoftYaHei;
					font-size: 20rpx;
					color: #666666;
					margin-top: 15rpx;

					.num {
						font-family: PingFang-SC-Medium;
						font-size: 30rpx;
						color: #ff3333;
						margin-right: 20rpx;

						.danwi {
							font-size: 18rpx;
						}
					}
				}

				.tiaojian {
					color: #666666;
					font-family: Microsoft YaHei;
					font-size: 20rpx;
					margin-top: 24rpx;
				}

				.remark {
					width: 150rpx;
					height: 50rpx;
					border-radius: 64rpx;
					border: 1rpx solid #B2B2B2;
					background-color: #FFFFFF;
					font-size: 24rpx;
					text-align: center;
					color: #333333;
					line-height: 50rpx;
					margin-left: 300rpx;
					margin-top: 10rpx;
				}
			}
		}

		.deliveryman {
			display: flex;
			// justify-content: space-between;
			align-items: center;

			image {
				width: 74rpx;
				height: 74rpx;
				border-radius: 74rpx;

			}

			.ifobox {
				margin-left: 33rpx;

				.name {
					font-size: 24rpx;
					font-weight: 700;
					color: #000000;
				}

				.tele {
					color: #666666;
					font-size: 22rpx;
					font-family: PingFang-SC-Medium;
					margin-top: 18rpx;
				}
			}
		}

		.spbox {
			margin-left: 17rpx;
			margin-top: 30rpx;

			.leftbox {
				color: #999999;
				font-family: MicrosoftYaHei;
				font-size: 22rpx;
			}

			.rightbox {
				font-family: MicrosoftYaHei;
				font-size: 22rpx;
				color: #000000;
			}
		}

		.spboxs {
			display: flex;
			justify-content: space-between;
			margin-left: 17rpx;
			align-items: center;

			.leftbox {
				color: #999999;
				font-family: MicrosoftYaHei;
				font-size: 22rpx;
			}

			.rightbox {
				font-family: MicrosoftYaHei;
				font-size: 22rpx;
				color: #000000;
			}

			.fzhi {
				width: 101rpx;
				height: 45rpx;
				background-color: #efefef;
				border-radius: 23rpx;
				border: solid 2rpx #949494;
				font-family: MicrosoftYaHei;
				font-size: 22rpx;
				color: #282828;
				line-height: 45rpx;
				text-align: center;
			}
		}

		.smallbox {
			height: 100rpx;
		}
	}

	.btnboxs {
		display: flex;
		height: 108rpx;
		line-height: 108rpx;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		right: 0;
		left: 0;
		padding-left: 25rpx;
		padding-right: 25rpx;
		box-sizing: border-box;

		.title {
			font-family: MicrosoftYaHei;
			font-size: 26rpx;
			color: #333333;

			.danwi {
				font-size: 24rpx;
				color: #E40000;
			}

			.price {
				font-size: 32rpx;
				color: #E40000;
			}
		}

		.anniubox {
			display: flex;
			align-items: center;

			.del {
				width: 200rpx;
				height: 70rpx;
				border-radius: 70rpx;
				line-height: 70rpx;
				background-color: #EFEFEF;
				text-align: center;
				color: #282828;
				font-size: 24rpx;
			}

			.now {
				width: 200rpx;
				height: 70rpx;
				border-radius: 70rpx;
				line-height: 70rpx;
				background-color: #FFA800;
				text-align: center;
				color: #FFFFFF;
				font-size: 24rpx;
				margin-left: 15rpx;
			}
		}

		.qr {
			width: 200rpx;
			height: 71rpx;
			line-height: 71rpx;
			border-radius: 71rpx;
			background-color: #F42121;
			text-align: center;
			margin-left: 533rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-top: 24rpx;
		}

		.order {
			width: 164rpx;
			height: 64rpx;
			line-height: 64rpx;
			border: 2rpx solid #B2B2B2;
			border-radius: 64rpx;
			text-align: center;
			font-size: 24rpx;
			color: #333333;
			margin-top: 20rpx;
		}

		.orders {
			width: 164rpx;
			height: 64rpx;
			line-height: 64rpx;
			border: 2rpx solid #B2B2B2;
			border-radius: 64rpx;
			text-align: center;
			font-size: 24rpx;
			color: #333333;
			margin-left: 344rpx;
			margin-top: 20rpx;
		}
	}

	.allbox {
		font-size: 30rpx;
		margin-top: -20rpx;
		color: #ff0000;

		.allprice {
			color: #666666;
			font-size: 20rpx;
			margin-left: 538rpx;
		}
	}
	.shixiao{
		color: #FFFFFF;
	}
</style>
